<template>
    <div class='main-oo' >
        <div class='content item' >
            <Row v-for='(v,k) in selectList' :key="k"  >
                <component :is="v.name"  >
                    {{v.value}}
                    <component v-for="(sv,sk) in v.slots" :key='k + sk' :is="sv.name" :slot="sk" >
                        {{sv.value}}
                    </component>
                </component>
            </Row>
        </div>
        <div class='text item' >
            <Tabs v-model="tabIndex">
                <TabPane label="组件库" name="1">
                    <Row class='row-wrapper' v-for='(c,k) in components' :key="k" :gutter="8" >
                        <Col span='6'>
                            {{k}}:
                        </Col>
                        <Col span='12'>
                            <component :is='k' >{{'DEMO'}}</component>
                        </Col>
                        <Col span='3'>
                            <Button @click='checkC(c)'>选择</Button>
                        </Col>
                        <Col span='3'>
                            <Button @click='addC(c)'>增加</Button>
                        </Col>
                    </Row>
                </TabPane>
                <TabPane label="元件" name="2">
                    <Row class='row-wrapper' v-for='(v,k) in selectList' :key="k" :gutter="8" >
                        <Col span='6'>
                            {{v.name}}:
                        </Col>
                        <Col span='12'>
                            <component :is="v.name" >{{'DEMO'}}</component>
                        </Col>
                        <Col span='3'>
                            <Button @click='checkI(k)'>选择</Button>
                        </Col>
                        <Col span='3'>
                            <Button @click='deleteI(k)'>删除</Button>
                        </Col>
                    </Row>
                </TabPane>
            </Tabs>
        </div>
        <div class='code item' >
                {{'<'+ 'template>'}}
                <p v-for='(v,k) in selectList' :key="'tem-'+k"  >
                    {{ '<'+v.name+' id="' + k + '" ' }}
                    {{ (t=>t.map(i=>":"+i.join('="')+'"').join(' '))(Object.entries(v.props)) }}
                    {{'>'}}
                    {{v.value}}
                    {{'</'+v.name+'>'}}
                </p>
                {{'<'+'/template>'}}
                <br>
                {{'<'+'script>'}}
                <br>
                {{'export default {'}}
                <br>
                    {{'data(){'}}
                        <p v-for='(v,k) in selectList' :key="'data-'+k"  >
                            //{{v.name}}.props
                            <br>
                           {{(t=>t.substr(1,t.length-2)+",\n")(JSON.stringify(v.data))}}
                        </p>
                    {{'},'}}
                <br>
                {{'}'}}
                <br>
                {{'<'+'/script>'}}
        </div>
        <div class='edit item' >
            <Tabs v-model="tabIndex">
                <TabPane label="组件库" name="1">
                    <apiProps :element='propsIt' :key='propsIt.name'></apiProps>
                </TabPane>
                <TabPane label="元件" name="2">
                    <div v-if='selectedIt.id' >
                        {{selectedIt.name}} # {{selectedIt.id}}
                        <propsHandler v-model='selectedIt.props' :options='components[selectedIt.name].props' />
                    </div>
                </TabPane>
            </Tabs>
        </div>
        <gj/>
    </div>
</template>
<script>

import iview from 'iview';

var cls = {
    
}

cls[iview.Avatar.name] = iview.Avatar
cls[iview.Button.name] = iview.Button
cls[iview.Input.name] = iview.Input
cls[iview.Card.name] = iview.Card
cls[iview.Page.name] = iview.Page
cls[iview.Divider.name] = iview.Divider 
cls[iview.Page.name] = iview.Page
cls[iview.Switch.name] = iview.Switch
cls[iview.Rate.name] = iview.Rate 
cls[iview.Select.name] = iview.Select
cls[iview.Slider.name] = iview.Slider 
cls[iview.Tag.name] = iview.Tag 
cls[iview.Modal.name] = iview.Modal 
cls[iview.Progress.name] = iview.Progress 
cls[iview.Time.name] = iview.Time 
cls[iview.Spin.name] = iview.Spin 
cls[iview.Carousel.name] = iview.Carousel 

import apiProps from '##/api/props';

import sortTag from '@@/sort/sortTag';
import checkBox from '@@/check/box';


import propsHandler from './handler/propsHandler';

export default {
    components:{
        apiProps,
        sortTag,
        checkBox,
        propsHandler,
    },
    data(){
        return {
            textMap:{
                '1':'组件库',
                '2':'已增加',
            },
            tabIndex:'1',
            components:{
                ...cls
            },
            selectList:{
                pk_1558608221460:{
                    id:'pk_1558608221460',
                    name:'sortTag',
                    value:'pk_1558608221460',
                    data:{sortStr:'innn'},
                    props:{
                        value:'sortStr'
                    },
                    slots:{}
                },
                pk_1558608147076:{
                    id:'pk_1558608147076',
                    name:'checkBox',
                    value:'pk_1558608147076',
                    data:{ckList:[]},
                    props:{
                        value:'ckList'
                    },
                    slots:{}
                }
            },
            propsIt:{},
            selectedIt:{
                props:{},
            },
        }
    },
    mounted(){
        var extw = ['sortTag','checkBox'];
        Object.keys(this.$options.components).filter(i=>extw.includes(i)).map(i=>{
            this.components[i] = this.$options.components[i];
        });
        this.$forceUpdate();
    },
    methods:{
        checkC(i){
            this.propsIt = i;
        },
        addC(i){
            var t = 'pk_' + new Date().getTime();
            this.$set(this.selectList,t,{
                id:t,
                name:i.name,
                value:t,
                props:this.getProp(i),
                data:this.getDef(i),
                slots:{},
            })
        },
        checkI(i){
            this.selectedIt = this.selectList[i];
            this.$forceUpdate()
        },
        deleteI(id){
            console.log(id);
            this.$delete(this.selectList,id);
        },
        getProp(i){
            var r = {};
            if(Array.isArray(i.props)){
                i.props.map(s=>{
                    r[s] = s;
                });
            }else{
                Object.keys(i.props).map(v => {
                    r[v] = v;
                });
            }
            return r;
        },
        getDef(i){
            var r = {};
            if(Array.isArray(i.props)){
                Object.keys(i.props).map(s=>{
                    r[s] = s;
                });
            }else{
                Object.keys(i.props).map(s => {
                    var t2 = i.props[s].default;
                    r[s] = t2?(typeof t2 == 'function'?t2.apply(this):t2):null;
                });
            }
            return r;
        }
    }
}
</script>
<style lang="less" scoped>
    .main-oo {
        display: grid;
        padding-right: 20px;
        grid-template-rows: 600px 300px;
        grid-template-columns: 3fr 550px;
        grid-gap: 2px;
        >div.item{
            font-size: 14px;
            padding: 10px;
            box-shadow: 0px 0px 3px #222 inset; 
            overflow:auto;
        }
        .row-wrapper {
            margin: 3px;
            height: 60px;
        }
        .content {
            box-shadow: 0px 0px 3px #222 inset;
            padding: 10px;
            height: 600px;

            background-image: 
                linear-gradient(45deg, #aaa 25%, transparent 0, transparent 75%, #aaa 0),
                linear-gradient(45deg, #aaa 25%, transparent 0, transparent 75%, #aaa 0);
            background-position: 0 0, 15px 15px;
            background-size: 30px 30px;
        }
        .text {
            background-color: #aaa;
            >div{
                >div {
                    margin: 3px;
                }
            }
        }
        .code {
            
        }
        .edit {

        }
    }
</style>

